<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关门式图文组合悬停特效</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <div class="container">
        <div class="item">
            <div class="img">
                <img src="./img/松.jpg" alt="">
            </div>
            <div class="caption">
                <h3>松</h3>
                <p>要说松树，要比大它比不过榕树，要比美它比不过柳树。但是，秋天，花谢了，草枯了，许多树的叶子都落尽了，松树却在秋风秋雨中舒展它的枝叶。</p>
            </div>

        </div>
        <div class="item">
            <div class="img">
                <img src="./img/竹.jpg" alt="">
            </div>
            <div class="caption">
                <h3>竹</h3>
                <p>竹有阳刚之气，又具阴柔之美。三千年华夏国粹，竹君始终是东方人追求的境界，但同时又与东方文化紧密相联。</p>
            </div>
            
        </div>
        <div class="item">
            <div class="img">
                <img src="./img/梅.jpg" alt="">
            </div>
            <div class="caption">
                <h3>梅</h3>
                <p>驿外断桥边，寂寞开无主。已是黄昏独自愁，更着风和雨。无意苦争春，一任群芳妒。零落成泥碾作尘，只有香如故。</p>
            </div>
            
        </div>
    </div>
</body>
</html>